<?php
/*
 * 演示：分页
 * 提示：为了方便查看，这次界面不是那么丑了
 * 用到了Bootstrap这个前端框架。我对这个比较熟悉，所以就用这个
*/
?>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Ajax分页</title>
		<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
		<style>
			#wrapper {
				width:600px;
				margin:0 auto;
			}
			#loading {
				display:none;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<h1>Ajax分页演示</h1>
			<div id="loading" class="alert alert-info">加载中，请稍候</div>
			<h3>基本信息</h3>
			<div class="list-group">
				<a class="list-group-item">当前页码：<span id="nowpage"></span></a>
				<a class="list-group-item">一共有<span id="articlenum"></span>篇文章</a>
				<a class="list-group-item">总计<span id="pagenum"></span>页</a>
			</div>
			<h3>文章列表</h3>
			<div id="articlelist" class="list-group">
			</div>
			<div>
				<a id="prevpage" class="btn btn-primary disabled">上一页</a>
				<a id="nextpage" class="btn btn-primary disabled">下一页</a>
			</div>
		</div>
		<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
		<script>
			var page=1,
			loadnow=function(){ //加载主函数
				$('#loading').show();
				$.ajax({
					"url":'demo-ajax.php?page='+page,
					"cache":false,
					"dataType":"text",
					"type":"GET",
					"success":function(data){
						data=$.parseJSON(data); //解析JSON
						if (typeof(data.article)==='undefined' || data.article===null) {
							alert('加载失败，请刷新重试');
							$('#loading').hide();
							return;
						}
						$('#nowpage').html(page);
						$('#articlenum').html(data.articlenum);
						$('#pagenum').html(data.pagenum);
						$('#articlelist').html('');
						$(data.article).each(function(i,n){ //将文章添加到列表中去
							$('#articlelist').append('<a class="list-group-item">'+n.title+'（'+n.id+'）</a>');
						});
						//上一页和下一页
						if (page!=1)  $('#prevpage').removeClass('disabled');
						if (page!=data.pagenum) $('#nextpage').removeClass('disabled');
						$('#loading').hide();
					},
					"error":function(){
						alert('加载失败，请刷新重试');
						$('#loading').hide();
						return;
					}
				});
			};
			//事件绑定
			$('#nextpage').bind('click',function(){
				if ($(this).hasClass('disabled')) return; //禁用状态，什么也不干
				page+=1; //页码+1
				$(this).addClass('disabled')
				loadnow();
			});
			$('#prevpage').bind('click',function(){
				if ($(this).hasClass('disabled')) return; //禁用状态，什么也不干
				page-=1; //页码-1
				$(this).addClass('disabled')
				loadnow();
			});
			//初始加载
			$(document).ready(function(){
				loadnow();
			});
		</script>
	</body>
</html>